<script setup lang="ts">
// 各大区业绩占比
import { storeToRefs } from 'pinia'
import { reactive, watch } from 'vue'
import EchartPie from '@/components/Echart/pie/index.vue'
import { useHomeStore } from '@/stores/module/home'
import { isMobile } from '@/Utils/global'
const homeStore = useHomeStore() // 创建store实例
const { homeAgePie } = storeToRefs(homeStore)

const top = isMobile() ? '31%' : '20%'
const options = reactive({
  name: 'RevenueSharePie',
  roseType: 'radius',
  legend: {
    top: top,
    showItem: ['a', 'c'], // 展示名称
    rich: {
      a: {
        width: 160,
      },
      c: {
        width: 30,
      },
    },
  },
  data: homeAgePie.value.info,
})
watch(
  () => homeAgePie.value,
  () => {
    // 重新赋值options.data
    options.data.splice(0, options.data.length, ...homeAgePie.value.info)
  },
  { deep: true }
)
</script>
<template>

    <card-box>
      <template v-slot:title v-if="homeStore.homeAgePie.title">
        <h1>{{ homeStore.homeAgePie.title || '' }}</h1>
      </template>
      <EchartPie
        :chart-data="options"
        v-if="homeStore.homeAgePie.info.length"
      />
      <div v-else class="default-img">
        <p>{{ $t('bi_common_nodata') }}</p>
      </div>
    </card-box>

</template>
<style lang="scss" scoped>
.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;

  font-size: 16px;
  color: #00f6ff;
}
</style>
